<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="table-container">
      <myTable
        :tableColumns="tableColumns"
        :data="tableData"
        :showOperation="true"
        :operationAttrs="operationAttrs"
      >
        <template #name="scope"> 小明的名字{{ scope.row.name }} </template>
        <template #operation="scope">
          <el-button>编辑{{ scope.row.name }}</el-button>
        </template>
      </myTable>
      <JPagination
        @current-change="onPageChange"
        @size-change="onPageSizeChange"
        :total="data.pageInfo.total"
        v-model:current-page="data.pageInfo.current"
        :page-size="data.pageInfo.size"
      ></JPagination>
    </div>
    <el-button @click="goCalendar">日历</el-button>
    <el-button v-throttle="goJob">任务</el-button>
    <!-- <JobTable
      border
      :columns="tableColumns.value"
      :showOperation="false"
      :data="data.tableData"
    >
    </JobTable> -->
  </div>
</template>
<script setup>
import { ref, reactive, nextTick } from "vue";
import myTable from "@/components/myTable.vue";
import JPagination from "@/components/JPagination.vue";
import { useRouter } from "vue-router";

const router = useRouter();

let data = reactive({
  pageInfo: {
    current: 1,
    size: 10,
    total: 0,
  },
});

const tableColumns = ref([
  {
    label: "日期",
    prop: "date",
    minWidth: "160",
  },
  {
    label: "姓名",
    prop: "name",
    minWidth: "160",
    slotName: "name",
  },
  {
    label: "年级",
    prop: "state",
    minWidth: "260",
    slotName: "state",
  },
  {
    label: "城市",
    prop: "city",
    minWidth: "260",
    slotName: "city",
  },
  {
    label: "地址",
    prop: "address",
    minWidth: "460",
    slotName: "name3",
  },
  {
    label: "标记",
    prop: "zip",
    minWidth: "260",
    slotName: "zip",
  },
]);
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const operationAttrs = {
  label: "操作",
  fixed: "right",
  width: 200,
};
const goCalendar = () => {
  router.push({
    path: "/calendar",
  });
};

const onPageChange = (val) => {
  data.pageInfo.current = val;
  nextTick(() => {
    // this.fetchList();
    console.log("下一页");
  });
};
const onPageSizeChange = (val) => {
  data.pageInfo.size = val;
  nextTick(() => {
    // this.fetchList();
    console.log("每页几条");
  });
};

const goJob = () => {
  console.log("kjjkjkjk");
};
</script>
<style lang="less" scoped>
.table-container {
  width: 100%;
  overflow-x: auto;
}
</style>

